情境

Flexbox 是 CSS3 的盒子模型(box model)，他是我們現代響應式佈局設計上的一個重要利器。其中一個很重要的部分就是他可以幫助我們快速的做到一些常見的對齊排列。雖然這些語法很方便，但是如果在一些小細節沒有注意到的話，也可能會發生意想不到的錯誤，今天我們要來討論這相關的議題。

以下面結構為例：

<div class="container">
  <div class="image__bird"></div>
  <div class="image__duck"></div>
  <div class="image__eagle"></div>
  <div class="image__frog"></div>
  <div class="image__snake"></div>
</div>

當我們將外容器(container)宣告為 Flexbox 後，我們就能夠對內部元件使用 Flex 的排版語法：

.container {
  display: flex;
}

我們可以對內元件做水平方向或是垂直方向的排列設定。例如我們可以決定內元件排列方向是要水平排列或是垂直排列；排列的時候是從頭開始排列，還是從尾部開始排列；排列的時候元件與元件之間的間格該如何分配等等，是個非常好用的排版元件。

你能看見多遠的未來呢？

我們舉一個常用的例子，假設我們有一個 Flexbox 容器，內容有幾張含圖片的卡片：

<div class="container">
  <div class="image__bird"></div>
  <div class="image__duck"></div>
  <div class="image__eagle"></div>
  <div class="image__frog"></div>
  <div class="image__snake"></div>
</div>

然後，我希望這些卡片能夠水平排列，並且中間能夠有固定間格隔開：

.container {
  display: flex;
  justify-content: space-between;
}

那我們預期應該會看到下面的效果：

這些圖片的排列並沒有什麼特別的地方，看起來很協調不是嗎？
但是，請注意，他只是「現在」看起來很協調。如果這個網頁換到別的不同尺寸的網頁上呢？我們來試著調整視窗的大小看看：

我們會發現，隨著視窗寬度的改變，卡片的間格也會被改變，而這樣的改變，會讓整個佈局變得不協調，往往這樣的效果不會是我們想要的。

[聊天時間]
如果我們在自己的裝置上面開發，並且也在自己的裝置上面測試，很有可能會忽略這樣的問題，因為我們不能假設使用者所使用的裝置尺寸跟我們一樣。並且，我們也不能忽略就算在同樣尺寸的裝置上，使用者有可能會用不同的視窗大小來瀏覽我們的網頁，如果我們的網頁一直保持同樣的大小在開發，那我們就很難發現這些問題。

讓內元件使用 Margin 將彼此隔開

如果我們的外容器很有可能會適應視窗大小而伸縮，並且我們也希望能夠固定卡片之間的間距，那我們就會需要使用一些「不彈性」的方法來隔開我們每一個卡片，例如我們能夠使用外距(margin)屬性來將卡片隔開：

.container {
  display: flex;
  & > *:not(:first-child) {
    margin-left: 1rem;
  }
}

使用 Flexbox gap

Flexbox 提供了更簡潔的屬性 gap 來幫助我們做到這件事，不過在使用這個屬性前，會需要留意瀏覽器版本的相容性：

.wrapper {
  display: flex;
  gap: 1rem;
}

小結

Flexbox 真的是非常好用的工具，透過 Flexbox 我們能夠讓複雜的排版用簡單幾句語法就能夠漂亮的完成。

不過，有由於他讓我們的元件排版變得很彈性，能夠適應響應式的佈局，反而我們會需要留意有些地方我們不需要隨著視窗大小改變而改變，例如今天舉例的卡片間距，我們今天舉的例子是水平方向的排列，當然，垂直方向的響應式也是會需要被留意的。